﻿{% extends "meetup_group_frame.html" %}
{% block title %}
创建相聚小组----New Life Starts Today!
{% endblock %}

{% block custom_header %}
<link rel="stylesheet" href="/static/css/jquery-ui.css" type="text/css"/>
<script type="text/javascript" src="/static/js/jquery-ui.js"></script>
<script type="text/javascript" src="/static/js/meetup_meetup_create.js"></script>
{% endblock %}

{% block content %}
<div id="C_page">
  <div id="C_pageBody">
    <div id="C_context">
      <div class="D_box">
        <div class="D_boxbody">
          <div class="D_boxhead">
            <h1>组织一次新的聚会吧!</h1>
          </div>
          <div class="D_boxsection divby5">
            <div class="D_col spans3 first">
              <div class="D_colbody">
                <form method="post" action="">
                  <table class="form nodividers locGroupName D_form">
                    <tbody>
                     <tr class="first">
                        <th><label>聚会主题:</label></th>
                        <td>
                                    <input name="topic" id="topic" style="width: 90% ! important;" value="{{form.topic.data|default:""}}" maxlength="60" class="hasMaxLen maxChars60 text locNameUpdateName" type="text">
                                    {% if form.topic.errors %}
                                      <div class="error">
                                          *<strong>{{form.topic.errors.0}}</strong>
                                      </div>
                                    {% endif %}
                                    <div class="D_locNameExample J_locNameExample"> 一个明确的<strong>聚会主题</strong>可以让大家更加了解此次聚会的目的。就像...
                                    <ul>
                                    <li>一起出来K歌吧！</li>
                                    <li>玉渊潭公园大聚餐！</li>
                                    </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th><label>活动地点:</label></th>
                        <td>
                                    <input name="address" id="address" style="width: 90% ! important;" value="{{form.address.data|default:""}}" maxlength="60" class="hasMaxLen maxChars60 text locNameUpdateName" type="text">
                                    {% if form.address.errors %}
                                      <div class="error">
                                          *<strong>{{form.address.errors.0}}</strong>
                                      </div>
                                    {% endif %}
                                    <div class="D_locNameExample J_locNameExample"> 一个明确地址可以告诉聚友<strong>活动的地点！</strong>
                          </div>
                        </td>
                      </tr>
                      <tr class="">
                        <th><label>活动时间:</label></th>
                        <td>
                            <div>
                            <div class="inlineForm locMenu" id="locMenu" title="">
                              <div class="D_form_compact" id="formLocation">
                                <div class="element coPicker"> <span class="label">
                                    <label for="from">从：</label>
                                  </span>
                                  <span class="input">
                                     <input name="date_from" id="date_from" style="width: 100px ! important;" value="{{form.date_from.data|default:""}}" maxlength="20" type="text">
                                  </span>
                                </div>
                                <div id="locPicker" class="element">
                                  <div id="locSwitchable">
                                    <span class="label">
                                      <label for="time" >时间：</label>
                                    </span>
                                    <span class="input">
                                      <select name="time_from" id="time_from">
                                        <option value=00:00>00:00</option>
                                        <option value=00:30>00:30</option>
                                        <option value=01:00>01:00</option>
                                        <option value=01:30>01:30</option>
                                        <option value=02:00>02:00</option>
                                        <option value=02:30>02:30</option>
                                        <option value=03:00>03:00</option>
                                        <option value=03:30>03:30</option>
                                        <option value=04:00>04:00</option>
                                        <option value=04:30>04:30</option>
                                        <option value=05:00>05:00</option>
                                        <option value=05:30>05:30</option>
                                        <option value=06:00>06:00</option>
                                        <option value=06:30>06:30</option>
                                        <option value=07:00>07:00</option>
                                        <option value=07:30>07:30</option>
                                        <option value=08:00>08:00</option>
                                        <option value=08:30>08:30</option>
                                        <option value=09:00>09:00</option>
                                        <option value=09:30>09:30</option>
                                        <option value=10:00>10:00</option>
                                        <option value=10:30>10:30</option>
                                        <option value=11:00>11:00</option>
                                        <option value=11:30>11:30</option>
                                        <option value=12:00>12:00</option>
                                        <option value=12:30>12:30</option>
                                        <option value=13:00>13:00</option>
                                        <option value=13:30>13:30</option>
                                        <option value=14:00>14:00</option>
                                        <option value=14:30>14:30</option>
                                        <option value=15:00>15:00</option>
                                        <option value=15:30>15:30</option>
                                        <option value=16:00>16:00</option>
                                        <option value=16:30>16:30</option>
                                        <option value=17:00>17:00</option>
                                        <option value=17:30>17:30</option>
                                        <option value=18:00>18:00</option>
                                        <option value=18:30>18:30</option>
                                        <option value=19:00>19:00</option>
                                        <option value=19:30>19:30</option>
                                        <option value=20:00>20:00</option>
                                        <option value=20:30>20:30</option>
                                        <option value=21:00>21:00</option>
                                        <option value=21:30>21:30</option>
                                        <option value=22:00>22:00</option>
                                        <option value=22:30>22:30</option>
                                        <option value=23:00>23:00</option>
                                        <option value=23:30>23:30</option>
                                      </select>
                                  </span>
                                  {% if form.date_from.errors%}
                                  <span class="error">
                                      *{{form.date_from.errors.0}}
                                  </span>
                                  {%endif%}
                                 </div>
                                </div>
                              </div>
                              
                              <div class="D_form_compact" id="formLocation">
                                <div class="element coPicker"> <span class="label">
                                    <label for="to">到：</label>
                                  </span>
                                  <span class="input">
                                     <input name="date_to" id="date_to" style="width: 100px ! important;" value="{{form.date_to.data|default:""}}" maxlength="20" type="text">
                                  </span>
                                </div>
                                <div id="locPicker" class="element">
                                  <div id="locSwitchable">
                                    <span class="label">
                                      <label for="时间" >时间：</label>
                                    </span>
                                    <span class="input">
                                      <select name="time_to" id="time_to">
                                        <option value=00:00>00:00</option>
                                        <option value=00:30>00:30</option>
                                        <option value=01:00>01:00</option>
                                        <option value=01:30>01:30</option>
                                        <option value=02:00>02:00</option>
                                        <option value=02:30>02:30</option>
                                        <option value=03:00>03:00</option>
                                        <option value=03:30>03:30</option>
                                        <option value=04:00>04:00</option>
                                        <option value=04:30>04:30</option>
                                        <option value=05:00>05:00</option>
                                        <option value=05:30>05:30</option>
                                        <option value=06:00>06:00</option>
                                        <option value=06:30>06:30</option>
                                        <option value=07:00>07:00</option>
                                        <option value=07:30>07:30</option>
                                        <option value=08:00>08:00</option>
                                        <option value=08:30>08:30</option>
                                        <option value=09:00>09:00</option>
                                        <option value=09:30>09:30</option>
                                        <option value=10:00>10:00</option>
                                        <option value=10:30>10:30</option>
                                        <option value=11:00>11:00</option>
                                        <option value=11:30>11:30</option>
                                        <option value=12:00>12:00</option>
                                        <option value=12:30>12:30</option>
                                        <option value=13:00>13:00</option>
                                        <option value=13:30>13:30</option>
                                        <option value=14:00>14:00</option>
                                        <option value=14:30>14:30</option>
                                        <option value=15:00>15:00</option>
                                        <option value=15:30>15:30</option>
                                        <option value=16:00>16:00</option>
                                        <option value=16:30>16:30</option>
                                        <option value=17:00>17:00</option>
                                        <option value=17:30>17:30</option>
                                        <option value=18:00>18:00</option>
                                        <option value=18:30>18:30</option>
                                        <option value=19:00>19:00</option>
                                        <option value=19:30>19:30</option>
                                        <option value=20:00>20:00</option>
                                        <option value=20:30>20:30</option>
                                        <option value=21:00>21:00</option>
                                        <option value=21:30>21:30</option>
                                        <option value=22:00>22:00</option>
                                        <option value=22:30>22:30</option>
                                        <option value=23:00>23:00</option>
                                        <option value=23:30>23:30</option>
                                      </select>
                                  </span>
                                  {% if form.date_to.errors%}
                                  <span class="error">
                                      *{{form.date_to.errors.0}}
                                  </span>
                                  {%endif%}
                                 </div>
                                </div>
                              </div>
                            </div>
                          </div
                          
                         ></td>
                      </tr>
                       <tr class="">
                        <th><label>动员大家的话：</label></th>
                        <td><textarea style="width: 90% ! important; height: 12em;" name="description" id="description" value="{{form.description.data|default:""}}" class="hasMaxLen maxChars5000"></textarea>
                          <div style="visibility: hidden;"><span id="charCount_short_desc" class="limit">5000 字符剩余 </span></div></td>
                      </tr>                     
                     
                      <tr class="last">
                        <th></th>
                        <td><label>
                          <button type="submit" name="Submit" class="D_submit">同意条款，创建新的活动</button>
                          </label>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </form>
                <!-- set select list in form value -->
                <script type="text/javascript">
                  document.getElementById('time_from').value = "{{form.time_from.data|default:"00:00"}}";
                  document.getElementById('time_to').value = "{{form.time_to.data|default:"00:00"}}";
                </script>
              </div>
            </div>
            <div class="D_col spans2 last">
              <div class="D_colbody">
                <div class="D_steps storytime storytimeCallout">
                  <h2>和您的朋友们聚聚吧!</h2>
                  <h3>聚会可以帮组您</h3>
                  <ul style="margin-bottom: 1em;">
                    <li>加强您和您的朋友的联系。</li>
                    <li>玩得开心！</li>
                  </ul>  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- C_context -->
  </div>
  <!-- C_pageBody -->
</div>
<!-- C_page -->
{% endblock %} 
